// 全局DOM对象
function getInfo() {
    var span = document.getElementById("output");
    span.innerHTML = "Broswer: " + navigator.appName + " System: " + navigator.platform;
}

function goBack() {
    history.back();
    alert("It's running!");
}

function computeTip() {
    // 小费计算器
    var subtotal = parseFloat(document.getElementById("subtotal").value);
    var tipPercent = parseFloat(this.innerHTML);
    var tipAmount = subtotal * tipPercent / 100.0;
    document.getElementById("total").innerHTML = "Tip: $" + tipAmount;
}

// 用JS代码设置字体加粗和样式
function boldClick() {
    var lyrics = document.getElementById("lyrics");
    if (this.checked) {
        lyrics.style.fontWeight = "bold";
    } else {
        lyrics.style.fontWeight = "normal";
    }
}

function italicClick() {
    var lyrics = document.getElementById("lyrics");
    if (this.checked) {
        lyrics.style.fontStyle = "italic";
    } else {
        lyrics.style.fontStyle = "normal";
    }
}
// JS代码设置字体
function fontClick() {
    var lyrics = document.getElementById("lyrics");
    lyrics.style.fontFamily = this.id;
}
// JS代码放大字体大小
function fontSizeEnlargeClick() {
    var lyrics = document.getElementById("lyrics");
    var oldSize = parseInt(lyrics.style.fontSize) || 12;
    lyrics.style.fontSize = (oldSize + 2) + "pt";
}

function fontSizeReduceClick() {
    var lyrics = document.getElementById("lyrics");
    var oldSize = parseInt(lyrics.style.fontSize) || 12;
    lyrics.style.fontSize = (oldSize - 2) + "pt";
}

// 修改DOM树的属性值
function changeAttr() {
    var root = document.getElementById("foo");
    root.firstChild.nextSibling.firstChild.nextSibling.firstChild.textContent = "Baidu";
    alert(root.childNodes.length);
}

// 在另一个元素中选择元素
function searchClick() {
    var searchPhrase = document.getElementById("searchtext").value;
    var main = document.getElementById("main");
    var mainParas = main.getElementsByTagName("p");
    for (var i = 0; i < mainParas.length; i++) {
        if (mainParas[i].innerHTML.indexOf(searchPhrase) >= 0) {
            mainParas[i].className = "highlighted"; // 高亮
        } else {
            mainParas[i].className = null; // 非高亮
        }
    }
}

// 创建和删除节点
function addHeadingClick() {
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "All work and no play makes Jack a dull boy";
    var area = document.getElementById("last");
    area.appendChild(newParagraph);
}

window.onload = function() {
    document.getElementById("tenpercent").onclick = computeTip;
    document.getElementById("fifteenpercent").onclick = computeTip;
    document.getElementById("eighteenpercent").onclick = computeTip;
    document.getElementById("browser").onclick = getInfo;
    document.getElementById("back").onclick = goBack;
    document.getElementById("bold").onclick = boldClick;
    document.getElementById("italic").onclick = italicClick;
    document.getElementById("serif").onclick = fontClick;
    document.getElementById("fantasy").onclick = fontClick;
    document.getElementById("monospace").onclick = fontClick;
    document.getElementById("bold").onclick = boldClick;
    document.getElementById("italic").onclick = italicClick;
    document.getElementById("enlarge").onclick = fontSizeEnlargeClick;
    document.getElementById("reduce").onclick = fontSizeReduceClick;
    document.getElementById("change").onclick = changeAttr;
    document.getElementById("searchbutton").onclick = searchClick;
    document.getElementById("addheading").onclick = addHeadingClick;
};